<script lang="ts" setup>
import { ref } from "vue";
import MyDialog from "@/components/MyDialog.vue";
import type { Hero } from "@/types/Hero";
import { STATIC_URL } from "@/configs/yz";

const show = ref(false);
const hero = ref(null as Hero | null);
const open = (props: { hero: Hero }) => {
	show.value = true;
	hero.value = props.hero;
};
defineExpose({ open });
</script>

<template>
	<MyDialog v-model:show="show">
		<div v-if="hero" class="hero-detail" @click.stop>
			<h1>{{ hero.name }}</h1>
			<h2>皮肤</h2>
			<img :src="STATIC_URL + hero.skins[0].src" alt="" />
			<h2>技能</h2>
			<template v-for="v in hero.skills" :key="v.skillId">
				<h3>{{ v.name }}</h3>
				<p>{{ v.description }}</p>
			</template>
		</div>
	</MyDialog>
</template>

<style lang="scss" scoped>
.hero-detail {
	width: 80vw;
	height: 60vh;
	display: flex;
	flex-direction: column;
	background-color: #232323;
	padding: 20rem;
	border-radius: 10rem;
	color: #fff;
	row-gap: 10rem;
	overflow: auto;
	img {
		width: 75.9rem;
		height: 105.6rem;
		border-radius: 4rem;
		object-fit: cover;
	}
	h1 {
		flex-shrink: 0;
		font-size: 16rem;
	}
	h2 {
		flex-shrink: 0;
		font-size: 14rem;
	}
	h3 {
		flex-shrink: 0;
		font-size: 12rem;
		font-weight: normal;
	}
	p {
		flex-shrink: 0;
		font-size: 10rem;
	}
}
</style>
